<template>
	<view class="container" v-if="showByRole === 1">
		
		<view class="tagBar">预约会议室
		<view style="margin-left: 260rpx;font-size: 30rpx;color: #2979FF;" @click="goMeetingReserved">查看已预约会议室</view>
		</view>
		    <view class="header">
		      <view class="search_input">
		        <u--form :model="time" ref="time">
		          <ul>
		            <li>
		              <u-form-item prop="reserveTime" label="选择日期:">
						  <u--input v-model="time.reserveTime"></u--input>
							<u-datetime-picker
								ref="datetimePicker"
								mode="date"
								:minDate=minDate
								@confirm="closeReserveTime"
								:show="show"
								@cancel="show=false"
								class="reserveBegin">
							</u-datetime-picker>
		              </u-form-item>
					  <u-button @click="show = true"  class="openTime">选择</u-button>
		            </li> 
		            <li>
		              <u-form-item prop="reserveBegin" label="开始时间:"  @click="showBegin = true;">
						  <u--input
						  		v-model="time.reserveBegin"
						  		disabledColor="#ffffff"
						  		placeholder="请选择时间"
						  		border="none"
						  ></u--input>
					  </u-form-item>
		            </li>
		            <li>
		              <u-form-item prop="reserveEnd" label="结束时间:">
						  <u--input
						  		v-model="time.reserveEnd"
						  		:disabled = "showEndInput"
						  		disabledColor="#e3e3e3"
						  		placeholder="请选择结束时间"
						  		border="none"
						  ></u--input>
						</u-form-item>
		            </li>
		          </ul>
				  <button class="searchButton" style="margin-left: 270rpx;background-color: #68EA46;margin-top: 400rpx;" @click="searchButton">搜索</button>
				  </u--form>
				  <u-action-sheet
				  		:show="showBegin"
				  		:actions="Begin_actions"
				  		title="请选择开始时间"
				  		@close="showBegin = false"
				  		@select="BeginSelect"
				  >
				  </u-action-sheet>
				  <u-action-sheet
				  		:show="showEnd"
				  		:actions="End_actions"
				  		title="请选择结束时间"
				  		@close="showBegin = false"
				  		@select="EndSelect"
				  >
				  </u-action-sheet>
			  </view>
			</view>
		</view>
	</view>
	<view v-else-if="showByRole === 3">
		<view class="tagBar" >审核
			<view style="margin-left: 440rpx;font-size: 27rpx;color: #2979FF;" @click="goMeetingReservedAll">查看所有会议室</view>
		</view>
		<view style="display: inline-flex;align-items: center;font-size: 30rpx;">
			审核状态：
			<u--input
					v-model="status"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择"
					border="none"
					style="width: 400rpx;margin-left: 10rpx;"
			></u--input>
			<u-button 	style="width: 200rpx;background-color: #398ADE;"@click="showRole = true;">选择</u-button>
			<u-icon
					slot="right"
					name="arrow-right"
			></u-icon>
		</view>
		<view style="display: inline-flex;align-items: center; margin-top: 40rpx;font-size: 30rpx;">
			<view>搜索：</view>
			<u--input
					v-model="searchValue"
					placeholder="请输入申请人id"
					border="none"
					style="width: 400rpx;margin-left: 70rpx;"
			></u--input>
			<u-button @click="searchReserveButton()"  style="width: 200rpx;background-color: #398ADE;">搜索</u-button>
			
		</view>
		<view style="display: flex;flex-direction: row;margin-top: 40rpx;height: 60rpx;border-radius: 20rpx;border-bottom: 1px solid #DDDDDD;font-size: 20rpx;">
			<view style="margin-left: 70rpx;">名称</view>
			<view  style="margin-left: 120rpx;">申请人</view>
			<view  style="margin-left: 170rpx;">房间号</view>
			<view  style="margin-left: 110rpx;">楼栋号</view>
		</view>
		<uni-pagination @change="handlePage" show-icon="true" :total="total" :current="current" :pageSize="pageSize"></uni-pagination>
		<!-- 表格数据行 -->
		<view v-for="(item,index) in pageList" :key="index" class="meeting" @click="choseMeeting(item.id)">
			<view class="meeting_item"><image src="@/static/tabs/home.png" class="image"></image></view>
			<view class="meeting_item name">{{item.meetingName}}</view>
			<view class="meeting_item people">{{item.applyId}}</view>
			<view class="meeting_item room">{{item.room}}</view>
			<view class="meeting_item building">{{item.building}}</view>
		</view>
		<u-action-sheet
				:show="showRole"
				:actions="actions"
				title="请选择角色"
				@select="roleSelect"
				@close="showRole = false"
		>
		</u-action-sheet>
	</view>
	<view v-else="showByRole === 2">
		<view class="tag" >
			<view @click="box1 = true" :class="{red:box1==true}">
				<view >会议室</view>
			</view>
			<view @click="box1 = false" :class="{red:box1==false}" >
				<view>用户</view>
			</view>
		</view>
		<view v-show="box1">
			<view style="display: inline-flex;flex-direction: row;align-items: center;margin: 30rpx;">
				<view style="font-size: 25rpx;">搜索：</view>
				<u--input
						v-model="searchValue"
						placeholder="请输入搜索内容"
						border="none"
						style="width: 400rpx;margin-left: 50rpx;"
				></u--input>
				<u-button @click="searchMeeingButton()"  style="width: 200rpx;margin-left: 165rpx;">搜索</u-button>
			</view>
			
			<view style="display: inline-flex;flex-direction: row;align-items: center;margin: 30rpx;">
				<view style="font-size: 25rpx;">会议室状态</view>
				<u--input
						v-model="meeting_status"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择"
						border="none"
						style="width: 725rpx;margin-left: 50rpx;"
				></u--input>
				<u-button @click="showMeetingStatus = true"  style="width: 200rpx;margin-left: 200rpx;">选择</u-button>
				<u-action-sheet
						:show="showMeetingStatus"
						:actions="meeting_actions"
						title="请选择"
						@select="meetingSelect"
						@close="showMeetingStatus = false"
				>
				</u-action-sheet>
			</view>
			
			<view style="font-size: 30rpx;border-bottom: 2px solid #DDDDDD;">
				会议室列表：
				<span style="float: right;margin-right: 20rpx;color:rgb(120,195,38) ;" @click="insertMeeting ">新增</span>
				</view>
				<view style="height: 100prx;">
					<uni-pagination :show-icon="true" @change="change1" :total="total" title="标题文字" :pageSize="pageSize" :current="current" style="display: flex;align-items: center;justify-content: center;"/>
				</view>
			<view class="info" v-if="meeting">
				<view style="display: flex;font-size: 30rpx;flex-direction: row; align-items: center;border-bottom:2px solid #DDDDDD;border-radius: 10rpx;">
					<view style="width: 500rpx;margin-left: 120rpx;">会议室名</view>
					<view style="width: 500rpx;margin-left: 120rpx;">房间号</view>
					<view style="width: 500rpx;margin-left: 70rpx;">楼栋号</view>
					</view>
				<!-- 表格数据行 -->
				<view v-for="(item,index) in pageList" :key="index" class="meeting" @click="clickMeeting(item)">
					<view class="meeting_item"><image src="@/static/tabs/home.png" class="image"></image></view>
					<view class="meeting_item name">{{item.meetingName}}</view>
					<view class="meeting_item room">{{item.room}}</view>
					<view class="meeting_item building">{{item.building}}</view>
				</view>
			</view>
			<view class="info" v-else>
				<view style="color: #dddddd;margin: 50rpx;">空</view>
			</view>
		</view>
		<view v-show="!box1" style="font-size: 30rpx;">
			<view style="display: inline-flex;flex-direction: row;align-items: center;margin: 30rpx;">
				<view>类别</view>
				<u--input
						v-model="user_status"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择"
						border="none"
						style="width: 785rpx;margin-left: 80rpx;"
				></u--input>
				<u-button @click="showUserStatus = true" style="width: 200rpx;float: right;margin-left: 200rpx;">选择</u-button>
				<u-action-sheet
						:show="showUserStatus"
						:actions="user_actions"
						title="请选择"
						@select="userSelect"
						@close="showUserStatus = false"
				>
				</u-action-sheet>
			</view>
			<view style="display: inline-flex;flex-direction: row;align-items: center;margin: 30rpx;">
			
			<view>搜索：</view>
			<u--input
					v-model="searchUserValue"
					placeholder="请输入搜索内容"
					border="none"
					style="width: 400rpx;margin-left: 50rpx;"
			></u--input>
			<u-button @click="searchUserButton()"  style="width: 200rpx;float: right;margin-left: 175rpx;">搜索</u-button>
			</view>
			<view style="margin-top: 60rpx;border-bottom: 2px solid #DDDDDD;">用户列表：
				<span style="float: right;margin-right: 20rpx;color:rgb(120,195,38) ;font-size: 30rpx;" @click="insertUser ">新增</span></view>
			<view class="info" v-if="userList">
				<view style="display: flex;flex-direction: row; align-items: center;">
				</view>
				<view style="height: 100prx;">
					<uni-pagination :show-icon="true" @change="change" :total="total" title="标题文字" :pageSize="pageSize" :current="current" style="display: flex;align-items: center;justify-content: center;"/>
				</view>
				<!-- 表格数据行 -->
				<view v-for="(item,index) in pageList" :key="index" class="user" @click="clickUser(item)">
					<image src="@/static/tabs/user.png" class="image"></image>
					<view style="display: flex;flex-direction: column;">
						<view class="user_item ">id:{{item.userId}}</view>
						<view class="user_item " style="	font-size: 30rpx;color: #DDDDDD;">用户名:{{item.username}}</view>
					</view>
				</view>
			</view>
			<view class="info" v-else>
				<view style="color: #dddddd;margin: 50rpx;">空</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				total: '',
				pageSize: 10,
				minDate:this.getTomorrorTime(),
				loading:false,
				pageList:'',
				status:'',
				showUserStatus:false,
				user_status:'',
				box1:true,
				showMeetingStatus:false,
				showRole:false,
				userList:'',
				searchUserValue:'',
				meeting_status:'',
				reserve:'',
				searchValue:'',
				user_actions:[{name:'教师',
				  },
				{
					name:'教务老师'
				},{
					name:'全部'
				}],
				meeting_actions:[
				{
					name:'已禁用',
				},
				{
					name:'未禁用',
				},
				{
					name:'全部',
				},],
				actions:[
				{
					name:'已审核',
				},
				{
					name:'未审核',
				},
				{
					name:'全部',
				},],
				  meetingList:'',
				  meetingList1:'',
				  showEnd:false,
				  showBegin:false,
				  showByRole:this.$store.getters.userinfo.role,
				  meeting:'',
				  subject:'',
				  show:false,
				  showEndInput:true,
				  time: {
					reserveTime:'',
					reserveBegin:'',
					reserveEnd:''
				  },
				  id:'',
				  
				  Begin_actions:[
					  {

					name:'8:00:00'
				  },
					{
					  name:'9:00:00'
					},
					{
					  name:'10:00:00'
					},
					{
					  name:'11:00:00'
					},
					{
					  name:'12:00:00'
					},
					{
					  name:'13:00:00'
					},
					{
					  name:'14:00:00'
					},
					{
					  name:'15:00:00'
					},
					{
					  name:'16:00:00'
					},
					{
					  name:'17:00:00'
					},
					{
					  name:'18:00:00'
					},{
					  name:'19:00:00'
					}, {
					  name:'20:00:00'
					}, {
					  name:'21:00:00'
					},
				  ],
				  End_actions:''
			}
		},
		onLoad(options) {
			this.showByRole =this.$store.getters.userinfo.role
			console.log(this.showByRole)
			if(this.showByRole===3){
				this.getAllReserve()
				
			}
			if(this.showByRole===2){
				this.getMeetingList()
				this.searchUserButton()
			}
		},
		onInit(){
			this.init()
		},
		methods: {
			handlePage(){
				console.log(e)
				this.current = e.current
				this.currentChangePage(this.reserve, this.current)
			},
			change1(e){
				console.log(e)
				this.current = e.current
				this.currentChangePage(this.meeting, this.current)
			},
			currentChangePage (list, currentPage) {
			      console.log('list', list)
			      let from = (currentPage - 1) * this.pageSize
			      let to = currentPage * this.pageSize
			      this.pageList  = []
			      for (; from < to; from++) {
			        if (list[from]) {
			          this.pageList.push(list[from])
			        }
			      }
			    },
			change(e) {
				console.log(e)
				this.current = e.current
				this.currentChangePage(this.userList, this.current)
			},
			searchReserveButton(){
				this.current = 1
				if(this.searchValue==''){
					this.getAllReserve()
				}else{
					uni.request({
						url:'/api/reserve/selectByApplyId?userId='+this.searchValue,
						method: 'get',
						success: (res) => {
							if(res.data.code===200&&res.data.data!=''){
								this.reserve = res.data.data		
								this.total = res.data.total
								this.currentChangePage(this.reserve, this.current)
							}else{
								uni.showToast({
									icon: 'error',
									position: 'bottom',
									title: '未查询到该用户的预约信息'
								})
							}
						}
					})
				}
			},
			getAllReserve(){
				uni.request({
					url:'/api/reserve/selectAllReserve',
					method: 'get',
					success: (res) => {
						if(res.data.code===200){
							this.reserve = res.data.data		
							this.total =res.data.total
							this.currentChangePage(this.reserve,1)
						}
					}
				})
			},
			init(){
				this.showByRole =this.$store.getters.userinfo.role
				console.log("init"+this.showByRole)
			},
			goMeetingReservedAll(){
				uni.navigateTo({
					url:'../meeting_reserveAll/meeting_reserveAll',
				})
			},
			getTomorrorTime(){
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth()+1;
				const day = date.getDate()+1;
				return year+"-"+month+"-"+day;
			},
			searchMeeingButton(){
				if(this.searchValue === ''){
					this.getMeetingList()
				}else{
					// #ifdef H5
					uni.request({
						url:'/api/meeting/getMeetingByBuilding?building='+this.searchValue,
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.meeting = res.data.data	
									this.total =1
									this.currentChangePage(this.meeting,1)
							}
						}
					})
					// #endif
					// #ifdef MP-WEIXIN
					uni.request({
						url:'http://localhost:8080/meeting/getMeetingByBuilding?building='+this.searchValue,
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.meeting = res.data.data		
							}
						}
					})
					// #endif
				}
				
			},
			insertUser(){
				uni.navigateTo({
					url:'../userInfo/userInfo',
				})
			},
			clickUser(item){
				uni.navigateTo({
					url:'../userInfo/userInfo?user='+encodeURIComponent(JSON.stringify(item)),
				})
			},
			userSelect(name){
				this.user_status = name.name
				if(this.user_status === '教师'){
					uni.request({
						url:'/api/user/selectAllUser?role='+1,
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.userList = res.data.data
												this.total =res.data.total
												this.currentChangePage(this.userList,1)
							}
						}
					})
				}else if(this.user_status === '教务老师'){
					uni.request({
						url:'/api/user/selectAllUser?role='+3,
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.userList = res.data.data	
											this.total =res.data.total
											this.currentChangePage(this.userList,1)
							}
						}
					})
					}else{
						this.searchUserButton()
					}
			},
			goMeetingReserved(){
				uni.navigateTo({
					url:"../meeting_reserved/meeting_reserved"
				})
			},
			clickMeeting(item){
				uni.navigateTo({
					url:'../insertMeeting/insertMeeting?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			insertMeeting(){
				uni.navigateTo({
					url:'../insertMeeting/insertMeeting'
				})
			},
			choseMeeting(id){
				uni.request({
					url:'/api/reserve/selectById?id='+id,
					method:'get',
					success(res) {
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '添加成功'
						})
						uni.navigateTo({
							url:'../meetingReserve/meetingReserve?reserve='+encodeURIComponent(JSON.stringify(res.data.data)),
						})
					},
					fail() {
						uni.showToast({
							icon: 'error',
							position: 'bottom',
							title: '查询出错'
						})
						uni.navigateBack({
							delta:1
						})
					}
				})
				
			},
			meetingSelect(name){
				this.meeting_status = name.name
				if(this.meeting_status === '已禁用'){
					uni.request({
						url:'/api/meeting/getMeetingByBan?role=0',
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.meeting = res.data.data
								this.total =res.data.total
								this.currentChangePage(this.meeting,1)
							}
						}
					})
				}else if(this.meeting_status === '未禁用'){
					uni.request({
						url:'/api/meeting/getMeetingByBan?role=1',
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.meeting = res.data.data
								this.total =res.data.total
								this.currentChangePage(this.meeting,1)
							}
						}
					})
				}else{
					this.getMeetingList()
				}
			},
			searchUserButton(){
				this.current = 1
				if(this.searchUserValue === ''){
					uni.request({
						url:'/api/user/selectAllUserInfo',
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.userList = res.data.data
								this.total = res.data.total
								this.currentChangePage(this.userList,1)
							}
						}
					})
				}else{
					uni.request({
						url:'/api/user/selectUserInfo?value='+this.searchUserValue,
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.pageList = res.data.data	
								console.log(this.pageList)
							}else{
								uni.showToast({
												icon: 'error',
												position: 'bottom',
												title: '查询不到此用户'
											})
							}
						}
					})
				}
			},
			roleSelect(name){
				this.status = name.name
				if(this.status === '已审核'){
					uni.request({
						url:'/api/reserve/selectReserved',
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.meeting = res.data.data
								this.total = res.data.total
								this.currentChangePage(this.meeting,1)
							}
						}
					})
				}else if(this.status === '未审核'){
					uni.request({
						url:'/api/reserve/selectUnReserved',
						method: 'get',
						success: (res) => {
							if(res.data.code===200){
								this.meeting = res.data.data	
								this.total = res.data.total
								this.currentChangePage(this.meeting,1)
								
							}
						}
					})
				}else{
					this.getReserveList()
				}
				
			},
			getMeetingList(){
				uni.request({
					url:'/api/meeting/getMeetingList',
					method: 'post',
					header:{
					            'content-type':'application/json;charset=UTF-8'
					        },
					data:{
						a:null
					},
					success: (res) => {
						if(res.data.code===200){
							this.meeting = res.data.data	
							this.total =res.data.total
							this.currentChangePage(this.meeting,1)
						}
					}
				})
			},
			getReserveList(){
				uni.request({
					url:'/api/reserve/selectAllReserve',
					method: 'get',
					success: (res) => {
						if(res.data.code===200){
							this.meeting = res.data.data
							this.total = res.data.total
							this.currentChangePage(this.meeting,1)
						}
					}
				})
				
			},
			searchButton(){
				if (this.time.reserveTime == '' || this.time.reserveBegin == '' || this.time.reserveEnd == '') {
				        uni.showToast({
										icon: 'error',
										position: 'bottom',
										title: '请选择日期'
									})
						}else{
							     uni.request({
							     	url:'/api/meeting/getFreeMeeting',
							     	method: 'post',
									 header:{
									            'content-type':'application/json;charset=UTF-8'
									        },
									data:this.time,
							     	success: (res) => {
							     		if(res.data.code===200){
											let data={
												listMeeting:res.data.data,
												time :this.time
											}
							     		   uni.showToast({
							     		   				icon: 'success',
							     		   				position: 'bottom',
							     		   				title: '查询成功！'
							     		   			})
											uni.navigateTo({
												url:'../meeting/meeting?data='+encodeURIComponent(JSON.stringify(data))
												
											})
							     		}
							     		
							     	}
							     })

							
						}
			},
			closeReserveTime(val){
				this.show=false
				let time = new Date(val.value)
				let year = time.getFullYear()
				let month =time.getMonth()+1
				let day =time.getDate()
				this.time.reserveTime = year+"-"+month+"-"+day
			},

			BeginSelect(val) {
			this.time.reserveBegin = val.name
			  /*
				  * 根据开始时间得出结束时间的范围
				  **/
			  let tag = false
			  this.Begin_actions.forEach(res => {
				if (tag || res.name === val.name) {
				  if (tag) {
					this.End_actions = [...this.End_actions,res]
				  }
				  console.log(this.End_actions)
				  tag = true
				}
				
			  })
			  this.showEndInput = false
			  this.showEnd=true
			},
			EndSelect(val) {
			  this.time.reserveEnd = val.name
			  this.showEnd=false
			}
		}
	}
</script>

<style>
.container{
  height: auto;
  margin-top: 20px;
}

.header{
  display: inline-flex;
  align-items: center;
}

.header .search .input{
  height: 14rpx;
  width: 127rpx;
  margin: 0 5rpx;

}
.search_input{
  height: 90%;
  border-radius: 5px;
  display: inline-flex;
}
.user{
	height: 100rpx;
	border:1px solid #dddddd;
	border-radius: 10rpx;
	margin: 10rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #2ea875;
}
.user_item{

	margin-left: 10rpx;
	width: 400rpx;
}
ul{
}
ul li{
  display: inline-flex;
  list-style: none;
  border-bottom: 1px solid #DDDDDD;
  width: 660rpx;
}
.openTime{
	margin-left: -280rpx;
	margin-top: 20rpx;
}
.dialog_button{
  margin: 20px 160px;
}
.tagBar{
  width: 1000px;
  font-size: 40rpx;
  margin-bottom: 50px;
  margin: 50rpx 20rpx;
	border-left: 4px solid #2979FF;
	display: flex;
	flex-direction: row;
}
.searchButton{
  margin-top: 20rpx;
  width: 200rpx;
}
.info{
	margin-top: 50rpx;
}
.meeting{
	height: 100rpx;
	border:1px solid #dddddd;
	border-radius: 10rpx;
	margin: 10rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #4d7ac2;
}
.meeting .room{
	margin-left: 170rpx;
}
.meeting .building{
	margin-left: 100rpx;
}
.meeting_item{
	display: inline-flex;
	font-size: 27rpx;
	width: 200rpx;

}
.people{
	margin-left: 20rpx;
}
.image{
	height: 100rpx;
	width: 80rpx;
	opacity: 0.6;
}

ul li .reserveBegin{
  width: 150px;
}
.practice:hover{
  background-color: #68ea46;
}
.practice:focus{
  background-color: #8d2f54;
}
.practice:active{
  background-color: #8d2f54;
}
.header-text{
  height: 25px;
  width: 960px;
  text-align: center;
  display: inline-flex;
  margin: 10px 20px;
}
.header-text .item{
  width: 170px;
}
.search_input{
  width: 50%;
}
.tag{
		height: 160rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		width: auto;
	}
.tag view{
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.searchButton{
	margin-left: -20rpx;
}
.red{
	border-bottom: 2px solid #2979FF;
}
.practice{
  display: inline-flex;
  margin-left: 25px;
  background-color: #5881e3;
  border-style: outset;
  margin-top: 8px;
  width:93%;
  border-radius: 10px;

}
.practice .practice-item{
  width: 190px;
  height: auto;
  text-align: center;
  margin-left: 10px;
  margin-top: auto;
  margin-bottom: auto;

}

</style>
